<template>
	<view class="custom_tickets">
		<view class="main">
			<scroll-view
				:scroll-top="scrollTop"
				scroll-y="true"
				class="scroll_Y"
				@scrolltoupper="upper"
				@scrolltolower="lower"
				@scroll="scroll">
				<view
					v-for="(item, key) of list"
					:style="count === key ? 'border: 2rpx solid #39B19D' : ''"
					class="ticket_box"
					@click="handSelectd(item, key)"
					:key="key">
					<view class="left">
						<view>{{ `$${item.money}` }}</view>
						<view>{{ `限用${item.num}次` }}</view>
					</view>
					<view class="right">
						<view>{{ item.title }}</view>
						<view class="expir">{{
							`有效期${formatDate(item.end_time)}`
						}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import useStore from '@/store/index.js';
import baseURL from '@/utils/baseURL.js';
import { formatDate } from '@/utils/formatDate';

export default {
	props: {
		list: {
			type: Array,
		},
	},
	data() {
		return {
			view: {},
			form: {},
			count: -1,
			options: {
				couponName: [
					{
						id: '1',
						name: '未使用',
					},
					{
						id: '2',
						name: '已預約',
					},
					{
						id: '3',
						name: '已使用',
					},
				],
			},
			scrollTop: 0,
			rules: {
				couponName: {
					type: 'string',
					required: true,
					message: '優惠券名稱',
					trigger: ['blur'],
				},
				storeCount: {
					type: 'string',
					required: true,
					message: '優惠券面额',
					trigger: ['blur'],
				},
				condition: {
					type: 'number',
					required: true,
					message: '優惠券面額',
					trigger: ['blur'],
				},
				roomType: {
					type: 'string',
					required: true,
					message: '包間類型',
					trigger: ['blur'],
				},
				startDate: {
					type: 'string',
					required: true,
					message: '開始時間',
					trigger: ['blur'],
				},
				endDate: {
					type: 'string',
					required: true,
					message: '結束時間',
					trigger: ['blur'],
				},
			},

			selectRange: [],
		};
	},
	mounted() {
		console.log('list=========', this.list);
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		submit() {
			// console.log(this.checkFormList(),"111111")
			if (this.checkFormList()) {
				// 提交数据
				const { title, num, money, min, start_time, end_time, room_type } =
					this.form;
				updateCouponSend({
					name: title,
					num,
					money,
					min,
					start_time,
					end_time,
					room_type,
					status: 1,
				}).then(res => {
					// console.log("添加成功")
					uni.showToast({
						title: '添加成功',
						duration: 1000,
					});
				});
			} else {
				uni.showModal({
					title: '系統提示',
					content: '請檢查是否填寫',
				});
			}
		},
		checkFormList() {
			const { title, num, money, min, start_time, end_time, room_type } =
				this.form;
			return (
				title && num && money && min && start_time && end_time && room_type
			);
		},
		formatDate(data) {
			return formatDate(data);
		},
		handSelectd(data, key) {
			this.count = key;
			this.$emit('ticketSlected', data);
		},
		handleClose() {
			this.showStartDate = false;
			this.showEndDate = false;
		},
		upper(e) {
			// console.log(e);
		},
		lower(e) {
			// console.log(e, '已经滚动到底部');
		},
		scroll(e) {
			// console.log(e, '记录滚动相关的数据');
		},
	},
};
</script>

<style lang="scss" scoped>
.custom_tickets {
	.main {
		padding: 20rpx;
		.scroll_Y {
			width: 100%; // 滚动区域的宽度
			height: 450rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些
			.ticket_box {
				position: relative;
				margin-bottom: 20rpx;
				border: 2rpx solid transparent;
				border-radius: 20rpx;
				background-color: $uni-color-white;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 250rpx;
					height: 150rpx;
					text-align: center;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: $uni-color-white;
					mask-image: radial-gradient(
							circle at 500rpx 8rpx,
							transparent 8rpx,
							$uni-color-green 9rpx
						),
						radial-gradient(
							closest-side circle at 50%,
							$uni-color-green 99%,
							transparent 100%
						);
					mask-size: 100%, 10rpx 20rpx;
					mask-repeat: repeat, repeat-y;
					mask-position: 140rpx 10rpx, 245rpx;
					mask-composite: source-out;
					mask-composite: subtract;
					background-color: $uni-color-green;
				}
				.right {
					flex: 1;
					height: 150rpx;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.expir {
						font-size: 24rpx;
						color: $uni-color-grey-dark;
					}
				}
			}
		}
	}
}
</style>
